<script setup>
import { ref, reactive, inject, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'

const $http = inject('$http');

const router = useRouter();

const users = ref([])

// 通过生命周期钩子来执行 加载后端数据的操作
onBeforeMount( () => {
    $http.get('/back/user/list').then( resp => {
        // 判断后端返回的响应数据是否是个数组
        if( Array.isArray(resp.data) ) {
            // 定义一个数组用于存放遍历resp.data得到每个对象
            const array = [];
            // 遍历 resp.data 数组
            resp.data.forEach( (e, index) => {
                // 将 data 中的数据重新包装后添加到 array 数组中
                array.push( { key: e.id, id: e.id, email: e.email, nickname: e.nickname } );
            } );
            // 将 array 赋值个 users
            users.value = array;
        }
    } ).catch( error => {
        console.log( error );
    } );
} );

const columns = [
    { title: '编号', dataIndex:'id', key: 'id' },
    { title: '邮箱', dataIndex: 'email', key: 'email' },
    { title: '昵称', dataIndex: 'nickname', key: 'nickname' },
    { title: '操作', dataIndex: 'actions', key: 'actions' },
];

const open = ref(false);

const userInfos = reactive({
    id: '',
    email: '',
    nickname: '',
});

// 将一个用 function 声明的 匿名函数 赋值给 edit 变量
const edit = function(record) {
    console.log('change: ', record);
    userInfos.id = record.id;
    userInfos.email = record.email;
    userInfos.nickname = record.nickname;
    // 打开修改用户的窗口
    open.value = true;
}

const update = () => {
    console.log('update');
    const url = '/back/user/update';
    const data = {
        id: userInfos.id,
        email: userInfos.email,
        nickname: userInfos.nickname
    }
    $http.post(url, data).then( resp => {
        const { success, message: msg } = resp.data
        if( success ) {
            message.success(msg);
            // 关闭修改用户的窗口
            open.value = false;
            // 将页面上表格中显示的数据同步修改
            const x = users.value.find( e => e.id === userInfos.id )
            x.id = userInfos.id;
            x.email = userInfos.email;
            x.nickname = userInfos.nickname;
            return;
        }
        message.error(msg);
    }).catch( error => {
        console.log( error );
    });
}

// 将一个 箭头函数 `id => { }` 赋值给 remove 变量
const remove = id => {
    $http.delete(`/back/user/remove/${id}`).then( resp => {
        // 根据被删除数据的 id 寻找它在 data 数组中的索引值
        const index = data.value.findIndex( e => e.id === id );
        // 使用数组提供的方法完成删除操作
        data.value.splice(index, 1); // 删除 index 处的 1 个元素
    } ).catch( error => {
        console.log( error );
    } );
}
</script>

<template>
    <h1>用户列表</h1>
    <a-table :data-source="users" :columns="columns">
        <!-- 通过 bodyCell 插槽 配置 表格体 中指定区域的显示内容 -->
        <!-- 通过 作用域插槽 分发内容(这里主要是用解构的 column 和 record 获取数据)-->
        <template #bodyCell="{ column, record }">
            <!-- 若指定的列是 actions 列 -->
            <template v-if="column.key === 'actions'">
                <!-- 通过作用域插槽中解构得到的 record 来获取 该行数据中的 id  -->
                <a href="#" @click="edit(record)">修改</a>
                <a-divider type="vertical" />
                <a-popconfirm title="确定要删除改行数据吗?" ok-text="确定" cancel-text="取消" @confirm="remove(record.id)">
                    <a href="#">删除</a>
                </a-popconfirm>
            </template>
        </template>
    </a-table>
    <!-- 用来修改用户的窗口 -->
    <a-modal v-model:open="open" title="修改用户信息" cancelText="取消" okText="确定"  @ok="update">
        <a-form :model="userInfos"
                :label-col="{ span: 4 }" 
                :wrapper-col="{ span: 16 }"
                autocomplete="off"
                @finish="update">
            <a-form-item label="编号" name="id">
                <a-input v-model:value="userInfos.id" readonly/>
            </a-form-item>
            <a-form-item label="邮箱" name="email">
                <a-input v-model:value="userInfos.email" readonly/>
            </a-form-item>
            <a-form-item label="昵称" name="nickname">
                <a-input v-model:value="userInfos.nickname"/>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<style scoped>

</style>